<template>
  <view class="box">
    <!-- 维修员“任务” -->
    <task
      class="taskStyle"
      @getTabIndex="getTabIndex"
      @acceptOrder="acceptOrder"
      @refuseOrder="refuseOrder"
      @viewOrderDetails="viewOrderDetails"
      :avatar="avatar"
      :nickName="nickName"
      :state="state"
      :orderListData="orderListData"
      :inProgressData="inProgressData"
      v-show="tabIndex == 0"
    ></task>

    <!-- 维修员“我的” -->
    <view v-if="tabIndex == 1"><repair-mine :avatar="avatar" :nick-name="nickName"></repair-mine></view>

    <!-- 底部导航 -->
    <view class="bottomTabbar">
      <base-tab-list-tabbar class="tabbar" :otherStyle="customStyle" :tabIndex="tabIndex" :tabList="tabList" @changeTab="changeTab"></base-tab-list-tabbar>
    </view>
  </view>
</template>

<script>
import config from '@/config'; // 导入配置文件
// 基本路径
const baseURL = config.baseURL;

import { taskAPI, myAPI } from '@/api/maintenanceWorkerApi.js';

export default {
  data() {
    return {
      ///////////////////////////////////  任务相关代码   //////////////////////////////////////////////
      customStyle: {
        justifyContent: 'space-around' // 传递自定义的样式属性对象
        // 其他样式属性可以根据需要添加
      },
      tabList: [
        {
          label: '任务'
        },
        {
          label: '我的'
        }
      ],

      tabIndex: 0,
      customStyle: {
        justifyContent: 'space-around' // 传递自定义的样式属性对象
        // 其他样式属性可以根据需要添加
      },
      marginStyle: {
        marginTop: '150rpx' // 使用驼峰式命名，并去掉分号
      },
      clickLabel: '',
      orderListData: [], //可接单列表
      inProgressData: [], //进行中列表
      maintainerId: 0,
      avatar: '',
      state: '',
      nickName: '',
      userInfo: {}

      ///////////////////////////////////  “我的”相关代码   //////////////////////////////////////////////
    };
  },
  methods: {
    ///////////////////////////////////  任务相关代码   //////////////////////////////////////////////
    getTabIndex(TabIndex) {
      if (TabIndex == 0) {
        this.getOrderList();
      } else if (TabIndex == 1) {
        this.getInProgress();
      }
    },
    changeTab(index) {
      this.tabIndex = index; // 更新标签索引
      this.clickLabel = this.tabList[index].label;
    },
    getOrderList() {
      taskAPI
        .getOrderList(this.maintainerId)
        .then(orderListData => {
          this.orderListData = orderListData;
        })
        .catch(err => {
          console.error('获取可接单列表失败:', err);
        });
    },
    getInProgress() {
      taskAPI
        .getInProgress(this.maintainerId)
        .then(inProgressData => {
          this.inProgressData = inProgressData;
        })
        .catch(err => {
          console.error('获取进行中列表失败:', err);
        });
    },
    acceptOrder(orderId) {
      taskAPI
        .acceptOrder(orderId)
        .then(() => {
          this.getOrderList();
        })
        .catch(err => {
          console.error('接单失败:', err);
        });
    },
    refuseOrder(orderId) {
      taskAPI
        .refuseOrder(orderId)
        .then(() => {
          this.getOrderList();
        })
        .catch(err => {
          console.error('拒绝接单失败:', err);
        });
    },
    viewOrderDetails(orderId, taskState, machineModelNumber) {
      taskAPI.viewOrderDetails(orderId, taskState, machineModelNumber);
    }
    ///////////////////////////////////  “我的”相关代码   //////////////////////////////////////////////
  },

  onLoad() {
    ///////////////////////////////////  任务相关代码   //////////////////////////////////////////////
    const userData = uni.getStorageSync('userData');
    this.avatar = `${config.baseURL}/img/${userData.user.facePhoto}`;
    this.nickName = userData.user.idName;

    switch (userData.user.stateEnum) {
      case 'ON':
        this.state = '已上班';
        break;
      case 'VACATION':
        this.state = '休假中';
        break;
      case 'WORKING':
        this.state = '任务中';
        break;
      case 'OFF':
        this.state = '已下班';
        break;
      default:
        this.state = '';
        break;
    }
    this.maintainerId = userData.user.id; //拿到当前登录用户的ID
    this.getOrderList();

    ///////////////////////////////////  “我的”相关代码   //////////////////////////////////////////////
  },
  onPullDownRefresh() {
    this.getOrderList();
    // 可用来刷新“我的”页面的数据
    uni.stopPullDownRefresh();
  }
};
</script>

<style lang="scss">
.box {
  background-color: #333333;
  height: 95vh;
  width: 100vw;

  .bottomTabbar {
    height: 7vh;
    width: 100vw;
    z-index: 5;
    // background-color: #ffaaff;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
